<template>
  <div>
    <el-card>
      <div id="containerMap"></div>
    </el-card>
  </div>
</template>

<script>
import { Scene, PointLayer } from "@antv/l7";
import { GaodeMapV2 } from "@antv/l7-maps"; // 默认引入高德2.0 版本
// import { ref, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { nextTick } from 'vue-demi';
export default {
  name: "mymap",
  setup(context, props) {
    const map = shallowRef(null);
    return {
      map,
    };
  },
  methods: {
    initMap() {
      let instance = this;
      AMapLoader.load({
        key: "2b45c6a7655404e69a9b856504d8625c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerMap", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [117.301291,31.844148], //初始化地图中心点位置
          });
          AMap.plugin(
            [
              "AMap.ToolBar",
              "AMap.Scale",
              "AMap.HawkEye",
              "AMap.MapType",
              "AMap.Geolocation",
            ],
            function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              instance.map.addControl(new AMap.ToolBar());

              // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
              instance.map.addControl(new AMap.Scale());

              // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
              instance.map.addControl(new AMap.HawkEye({ isOpen: true }));

              // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
              instance.map.addControl(new AMap.MapType());

              // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
              instance.map.addControl(new AMap.Geolocation());
            }
          );

        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  activated(){
    // 页面活动时加载地图容器
   this.$nextTick(()=>{
     this.initMap();
   });
    
  },
  deactivated() {
    //页面失去焦点后删除地图容器
    this.map.destroy();
  },
  
};
</script>

<style lang="less" scoped>
#containerMap {
  width: calc(100vw - 200px);
  height: calc(100vh - 3rem);
  position: absolute;
  top: 3rem;
  left: 200px;
}
</style>
